<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.development.js"></script>
<script src="../../javascript/react-dom.development.js"></script>
<script src="../../javascript/babel.min.js"></script>
<script type="text/babel">
    /*
    *组件从创建到死亡会经历一些特定的阶段
    *React组件中包含了一系列钩子函数(生命周期回调函数)会在特定的时刻调用
    *在定义组件的时候，会在特定的生命周期函数中做特定的工作
    *组件从被创建到被销毁的过程称为组件的生命周期
    * */
    class App extends React.Component {
        constructor(props, context) {
            console.log("constructor()方法在组件初始化的时候调用")
            super(props, context)
            this.state = {opacity: 1}
            this.time = setInterval(() => {
                let {opacity} = this.state
                opacity -= 0.1
                if (opacity <= 0) opacity = 1
                this.setState({opacity})
            }, 200)

        }

        componentWillMount(){
            console.log("componentWillMount()方法在组件挂载之前(插入DOM树)之前调用")
        }

        componentDidMount() {
            console.log("componentDidMount()方法在组件挂载后(插入DOM树中)立即调用")
        }

        render() {
            console.log("render()方法在组件初始化渲染和状态更新后立即调用")
            const {opacity} = this.state
            return (
                <div className="app">
                    <h2 style={{opacity}}>React学不会怎么办??</h2>
                    <button onClick={this.death}>不活了</button>
                </div>
            );
        }

        componentWillUnmount() {
            console.log("componentWillUnmount()方法在组件卸载及销毁之前直接调用")
            clearInterval(this.time)
        }

        death = () => {
            // 卸载组件(unmountComponentAtNode用于从DOM中移除一个已挂载的React组件)
            ReactDOM.unmountComponentAtNode(document.querySelector("#root"));
        }

    }

    ReactDOM.render(<App></App>, document.querySelector("#root"))
</script>
</body>
</html>